import React, { useEffect, useRef } from "react";
const options: any = {
  seriesName: "Vinyl records",
  padding: 40,
  doughnutHoleSize: 0.4,
  data: {
    "Classical Music": 16,
    "Alternative Rock": 12,
    Pop: 18,
    Jazz: 32,
  },
  colors: ["#80DEEA", "#FFE082", "#FFAB91", "#CE93D8"],
  titleOptions: {
    align: "center",
    fill: "black",
    font: {
      weight: "bold",
      size: "18px",
      family: "Lato",
    },
  },
};
export default function DoughnutChart() {
  const canvasRef = useRef<HTMLCanvasElement | null>(null);
  useEffect(() => {
    const canvas = canvasRef.current;
    const context = canvas?.getContext("2d");
    if (!context) return;
    // drawLine(context, 10, 75, 100, 100, "red");
    // drawArc(context, 100, 75, 50, 0, 2 * Math.PI, "red");
    // drawPieSlice(context, 100, 75, 50, 0, Math.PI / 2, "red", "blue", true);
    drawSlices(context, options);
  }, []);
  /**
   * 画一条直线
   * @param ctx 上下文
   * @param startX 开始的横坐标
   * @param startY 开始的纵坐标
   * @param endX 结束的横坐标
   * @param endY 结束的纵坐标
   * @param color 线的颜色
   */
  function drawLine(
    ctx: CanvasRenderingContext2D,
    startX: number,
    startY: number,
    endX: number,
    endY: number,
    color: string
  ) {
    ctx.save();
    ctx.strokeStyle = color;
    ctx.beginPath();
    ctx.moveTo(startX, startY);
    ctx.lineTo(endX, endY);
    ctx.stroke();
    ctx.restore();
  }
  /**
   *画圆弧
   * @param ctx canvas上下文
   * @param centerX 圆心的横坐标
   * @param centerY 圆心的纵坐标
   * @param radius 圆的半径
   * @param startAngle 开始位置
   * @param endAngle 结束位置
   * @param color 圆弧的颜色
   */
  function drawArc(
    ctx: CanvasRenderingContext2D,
    centerX: number,
    centerY: number,
    radius: number,
    startAngle: number,
    endAngle: number,
    color: string
  ) {
    ctx.save();
    ctx.strokeStyle = color;
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, startAngle, endAngle);
    ctx.stroke();
    ctx.restore();
  }
  /**
   *填充圆
   * @param ctx canvas上下文
   * @param centerX 圆心横坐标
   * @param centerY 圆心纵坐标
   * @param radius 半径
   * @param startAngle 开始位置
   * @param endAngle 结束位置
   * @param fillColor 填充色
   * @param strokeColor 边框颜色
   *  @param useStrokeColor 是否使用填充色
   */
  function drawPieSlice(
    ctx: CanvasRenderingContext2D,
    centerX: number,
    centerY: number,
    radius: number,
    startAngle: number,
    endAngle: number,
    fillColor: string,
    strokeColor: string,
    useStrokeColor: boolean
  ) {
    ctx.save();
    ctx.fillStyle = fillColor;
    if (useStrokeColor) {
      // 使用边框颜色
      ctx.strokeStyle = strokeColor;
    }
    ctx.beginPath();
    ctx.moveTo(centerX, centerY);
    ctx.arc(centerX, centerY, radius, startAngle, endAngle);
    ctx.closePath();
    ctx.fill();
    if (useStrokeColor) {
      // 描边
      ctx.stroke();
    }
    ctx.restore();
  }

  //https://webdesign.tutsplus.com/how-to-draw-a-pie-chart-and-doughnut-chart-using-javascript-and-html5-canvas--cms-27197t
  function drawSlices(contex: any, options: any) {
    const colors: any = options.colors;
    const titleOptions = options.titleOptions;
    const totalValue: any = [...Object.values(options.data)].reduce(
      (a: any, b: any) => a + b,
      0
    );
    // const radius =
    //   Math.min(canvas.width / 2, this.canvas.height / 2) - options.padding;
    let colorIndex = 0;
    let startAngle = -Math.PI / 2;
    let sliceAngle = 0;
    for (const categ in options.data) {
      const val = options.data[categ];
      sliceAngle = (2 * Math.PI * val) / totalValue;
      drawPieSlice(
        contex,
        100,
        75,
        50,
        startAngle,
        startAngle + sliceAngle,
        colors[colorIndex],
        "blue",
        true
      );
      startAngle += sliceAngle;
      colorIndex++;
    }
  }
  return <canvas ref={canvasRef} />;
}
